<template>
    <div class="w-[140px] overflow-hidden">
        <div
            class="flex items-center p-1 cursor-pointer rounded hover:bg-zinc-100/60 dark:hover:bg-zinc-800"
            v-for="item in listData"
            :key="item.id"
            @click="emits('hanldeItemClick', item)"
        >
            <m-svg-icon
                :name="item.icon"
                class="w-1.5 h-1.5 mr-1"
                fillClass="fill-zinc-900 dark:fill-zinc-300"
            ></m-svg-icon>
            <span class="text-zinc-900 text-sm dark:text-zinc-300">
                {{ item.name }}
            </span>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    listData: {
        type: Array,
        required: true,
        validator(val) {
            let arr = val
            for (let i = 0; i < arr.length; i++) {
                let keys = Object.keys(arr[i])
                if (!keys.includes('name')) {
                    throw new Error(`数组的每一项必须包含 key值 name`)
                }
                if (!keys.includes('id')) {
                    throw new Error(`数组的每一项必须包含 key值 id`)
                }
                break
            }
            return val
        }
    }
})
const emits = defineEmits(['hanldeItemClick'])
</script>
<style lang="scss" scope></style>
